<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #outer {
            height: 375px;
            width: 500px;
            padding: 30px;
            background: greenyellow;
            margin: 50px auto;
            text-align: center
        }
    </style>

    <script>
        window.onload = function() {
            var prev = document.getElementById("prev");
            // 获取img的src
            var img = document.getElementsByTagName("img")[0];
            //    创建一个index用来储存img的序列
            var index = 0;
            // 创建一个数组用来储存图片的路径
            var imgArr = ["./img/one.jpg", "./img/two.jpg", "./img/three.jpg"];
            prev.onclick = function() {
                // alert("上一页");
                index--;
                // 判断index是否小于0
                if (index < 0) {
                    index = imgArr.length - 1;
                }
                img.src = imgArr[index];
                wenzi.innerHTML = "共有" + imgArr.length + "张图片" + "当前是第" + index + "张"
            }
            var next = document.getElementById("next");
            next.onclick = function() {
                // alert("下一页");
                index++;
                // 
                if (index > imgArr.length - 1) {
                    index = 0;
                }
                img.src = imgArr[index];
                wenzi.innerHTML = "共有" + imgArr.length + "张图片" + "当前是第" + (index + 1) + "张"
            }


            // 文字提示
            var wenzi = document.getElementById("wenzi");

        }
    </script>
</head>

<body>
    <div id="outer">
        <p id="wenzi"></p>
        <img src="./img/one.jpg" alt="悟空好可爱">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>